<template>
  <div class="dingtalk-login-container">
    <div class="login-box">
      <div class="logo-section">
        <h1>🔴 Reddbook</h1>
        <p class="subtitle">记录生活，分享美好</p>
      </div>

      <div class="welcome-text">
        <h2>欢迎回来</h2>
        <p>请选择登录方式</p>
      </div>

      <div class="login-options">
        <!-- 钉钉登录按钮 -->
        <button class="dingtalk-btn" @click="handleDingtalkLogin">
          <svg class="dingtalk-icon" viewBox="0 0 1024 1024">
            <path fill="#1677ff" d="M813.056 210.944c0-58.368-47.104-105.984-105.472-105.984H316.416c-58.368 0-105.984 47.616-105.984 105.984v602.112c0 58.368 47.616 105.984 105.984 105.984h391.168c58.368 0 105.472-47.616 105.472-105.984V210.944z"/>
            <circle fill="#fff" cx="512" cy="512" r="120"/>
          </svg>
          <span>钉钉扫码登录</span>
        </button>

        <!-- 其他登录方式占位 -->
        <div class="divider">
          <span>其他登录方式</span>
        </div>

        <div class="other-login">
          <button class="other-btn" disabled>
            <span>📱 手机号登录（开发中）</span>
          </button>
        </div>
      </div>

      <div class="agreement">
        <p>登录即表示同意<router-link to="/terms">《用户协议》</router-link>和<router-link to="/privacy">《隐私政策》</router-link></p>
      </div>
    </div>

    <!-- 背景装饰 -->
    <div class="bg-decoration"></div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const handleDingtalkLogin = async () => {
  try {
    // 获取钉钉授权URL
    const response = await fetch('http://localhost:8000/api/dingtalk/auth-url')
    const data = await response.json()
    
    if (data.auth_url) {
      // 保存state到localStorage
      localStorage.setItem('dingtalk_state', data.state)
      
      // 跳转到钉钉授权页面
      window.location.href = data.auth_url
    }
  } catch (error) {
    console.error('获取钉钉授权URL失败:', error)
    alert('登录失败，请重试')
  }
}
</script>

<style scoped>
/* 全屏布局 - 确保容器铺满整个视口 */
.dingtalk-login-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ff6b9d 0%, #c44569 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  z-index: 0;
}

.bg-decoration {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="rgba(255,255,255,0.1)" d="M0,96L48,112C96,128,192,160,288,186.7C384,213,480,235,576,213.3C672,192,768,128,864,128C960,128,1056,192,1152,197.3C1248,203,1344,149,1392,122.7L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') no-repeat bottom;
  background-size: cover;
  opacity: 0.3;
  pointer-events: none;
}

.login-box {
  position: relative;
  z-index: 1;
  background: white;
  border-radius: 24px;
  padding: 48px 56px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  width: 100%;
  max-width: 440px;
  margin: 0;
  animation: slideUp 0.5s ease-out;
  box-sizing: border-box;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.logo-section {
  text-align: center;
  margin-bottom: 40px;
}

.logo-section h1 {
  font-size: 36px;
  font-weight: 700;
  color: #ff2442;
  margin: 0;
  letter-spacing: -0.5px;
}

.subtitle {
  color: #666;
  font-size: 14px;
  margin-top: 8px;
}

.welcome-text {
  text-align: center;
  margin-bottom: 32px;
}

.welcome-text h2 {
  font-size: 28px;
  font-weight: 600;
  color: #333;
  margin: 0 0 8px 0;
}

.welcome-text p {
  color: #999;
  font-size: 14px;
  margin: 0;
}

.login-options {
  margin-bottom: 24px;
}

.dingtalk-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 24px;
  background: linear-gradient(135deg, #1677ff 0%, #0958d9 100%);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(22, 119, 255, 0.3);
}

.dingtalk-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(22, 119, 255, 0.4);
}

.dingtalk-btn:active {
  transform: translateY(0);
}

.dingtalk-icon {
  width: 24px;
  height: 24px;
}

.divider {
  display: flex;
  align-items: center;
  margin: 24px 0;
  color: #d9d9d9;
  font-size: 14px;
}

.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #f0f0f0;
}

.divider span {
  padding: 0 16px;
  color: #999;
}

.other-login {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.other-btn {
  width: 100%;
  padding: 14px 24px;
  background: #f8f8f8;
  color: #999;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  font-size: 15px;
  cursor: not-allowed;
  transition: all 0.3s ease;
}

.agreement {
  text-align: center;
  font-size: 12px;
  color: #999;
}

.agreement a {
  color: #1677ff;
  text-decoration: none;
}

.agreement a:hover {
  text-decoration: underline;
}

/* 响应式设计 - 移动端适配 */
@media (max-width: 768px) {
  .login-box {
    max-width: 90%;
    padding: 32px 24px;
    margin: 0 16px;
    border-radius: 16px;
  }

  .logo-section h1 {
    font-size: 28px;
  }

  .welcome-text h2 {
    font-size: 22px;
  }

  .dingtalk-btn {
    padding: 14px 20px;
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  .login-box {
    max-width: 95%;
    padding: 24px 20px;
    margin: 0 8px;
  }

  .logo-section h1 {
    font-size: 24px;
  }

  .welcome-text h2 {
    font-size: 20px;
  }
}

/* 确保在大屏幕上也能全屏显示 */
@media (min-width: 1440px) {
  .login-box {
    max-width: 480px;
  }
}

/* 横屏适配 */
@media (orientation: landscape) and (max-height: 600px) {
  .login-box {
    max-height: 90vh;
    overflow-y: auto;
    padding: 24px 32px;
  }

  .logo-section {
    margin-bottom: 24px;
  }

  .welcome-text {
    margin-bottom: 20px;
  }
}
</style>

